<template>
	<div>
		<van-nav-bar
		  title="首页"
		/>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
		  <van-swipe-item v-for="item in imgList" :key="item">
				<img :src="item" class="banner" alt="">
			</van-swipe-item>
		</van-swipe>
		<div class="tool-bar">
			<div class="container">
				<div class="item" @click="jump('/shop')">
					<div class="icon">
						<van-icon name="logistics"></van-icon>
					</div>
					<div class="text">
						商城
					</div>
				</div>
				<div class="item" @click="jump('/activity')">
					<div class="icon">
						<van-icon name="discount"></van-icon>
					</div>
					<div class="text">
						活动
					</div>
				</div>
				<div class="item" @click="jump('/me')">
					<div class="icon">
						<van-icon name="user-o"></van-icon>
					</div>
					<div class="text">
						我的
					</div>
				</div>
			</div>
		</div>
		<div class="boxs">
			<div class="item-box">
				<div class="item-title">
					<van-cell is-link="" value="查看所有商品" @click="jump('/shop')"  >
						<template #title>
							<van-icon name="gift-o"></van-icon>
							热门商品
						</template>
					</van-cell>
					
				</div>
				<div class="item-content">
					<van-card
						v-for="item in hotGoodsList"
						:key="item.id"
					  :num="item.count"
						tag="hot"
					  :price="item.price*item.discount/10"
					  :desc="item.description"
					  :title="item.name"
					  :thumb="item.logo"
					  :origin-price="item.price"
						
						@click="handleGoodsInfo(item)"
					>
						<template #tags>
							<div>
								销量：{{item.saleCount}}
							</div>
						</template>
					</van-card>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import p1 from '@/static/p1.jpeg'
	import p2 from '@/static/p2.jpeg'
	import p3 from '@/static/p3.jpeg'
	import p4 from '@/static/p4.jpeg'
	import p5 from '@/static/p5.jpeg'
	import {mapState,mapMutations} from 'vuex'
	import {getHotGoodsList} from '@/api/shop-api.js'
	export default{
		data(){
			return {
				disabled:false,
				imgList:[p1,p2,p3,p4,p5],
				hotGoodsList:[]
			}
		},
		async created(){
			await this.getHotGoodsList()
		},
		methods:{
			...mapMutations(['setActive']),
			handleOnEnd(){
				console.log('end')
				if(this.disabled == false){
					this.disabled = true
				}
				
				setTimeout(() => {
					this.disabled = false
				},1000)
			},
			jump(path){
				this.setActive(path.substring(1))
				// this.$router.push(path)
			},
			async getHotGoodsList(){
				let res = await getHotGoodsList();
				if(res.data.code == 200){
					this.hotGoodsList = res.data.data.list
				}
			},
			handleGoodsInfo(item){
				this.$router.push({path:'/shop-info',query:{id:item.id}})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.my-swipe{
		.banner{
			width: 100%;
			height: 160px;
			object-fit: cover;
		}
	}
	.tool-bar{
		box-sizing: border-box;
		padding: 10px 15px;
		.container{
			border-radius: 6px;
			box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.1);
			padding: 10px;
			display: flex;
			justify-content: space-around;
			.item{
				display: inline-block;
				.icon{
					width: 40px;
					height: 40px;
					text-align: center;
					line-height: 45px;
					font-size: 20px;
					background-color: #409EFF;
					color: #fff;
					border-radius: 50%;
					margin: auto;
				}
				.text{
					text-align: center;
					font-size: 14px;
					padding: 5px 10px;
					color: #444;
					padding-bottom: 0px;
				}
			}
			.item:nth-child(2){
				.icon{
					background-color: #F56C6C;
				}
			}
			
			.item:nth-child(3){
				.icon{
					background-color: #E6A23C;
				}
			}
		}
	}
	.boxs{
		padding: 0px 15px;
		.item-box{
			border-radius: 7px;
			box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.1);
			overflow: hidden;
		}
	}
</style>
